<template>
	<div class="person" @click="showDetails(user.userId)">
		<div class="head-portrait">
			<img src="@/assets/image/person-default.png">
		</div>
		<div class="info">
			<div>
				姓名：{{user.userName}}
			</div>
			<div>{{user.phonenumber}}</div>
			<div>{{user.idNumber}}</div>
			<div class="post">
				<div class="postName" :title="user.postNames">{{user.postNames}}</div>
				<el-button v-if="user.inOutArea == 0" type="success" size="mini" @click.stop="checkIn(user.userId)">进场</el-button>
				<el-button v-else type="warning" size="mini" @click.stop="checkOut(user.userId)">撤场</el-button>
			</div>
			<div class="projectName">
				{{user.projectName}}
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Person',
		props: {
			user: {
				type: Object,
				default: {}
			}
		},
		created() {},
		methods: {
			checkIn(userId) {
				this.$emit('checkIn', userId)
			},
			checkOut(userId) {
				this.$emit('checkOut', userId)
			},
			showDetails(userId){
				this.$emit('showDetails', userId)
			}
		}
	}
</script>

<style>
	.person {
		width: 305px;
		height: 160px;
		border: 1px solid #E6E6E8;
		padding: 14px 10px;
		box-sizing: border-box;
		float: left;
		margin: 5px;
		border-radius: 5px;
		cursor: pointer;
	}
	
	.person:hover {
		background: #CCE9FC;
	}
	
	.person .head-portrait {
		width: 110px;
		float: left;
		margin-right: 5px;
	}
	
	.person .info {
		width: calc(100% - 115px);
		float: left;
		margin-top: -10px;
	}
	
	.info .post {
		width: 170px;
	}
	
	.info .projectName {
		width: 160px;
		float: left;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.post .postName {
		width: 100px;
		float: left;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.person .info div {
		height: 30px;
		line-height: 30px;
	}
	
	.info button {
		float: left;
	}
</style>